<script setup lang="ts">
import { router } from '../../utils/tools';

defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    },
    btnName: {
        type: String,
        default: ''
    },
    btnRouter: {
        type: String,
        default: ''
    }
})
</script>
<template>
    <uv-overlay zIndex="1999" :show="show" zoom="true" round="10" @change="change" class="overlay">
        <view class="validate">
            <view class="flex justify-between ">
                <view class="icon flex flex-center">
                    <view class="icon2 flex flex-center">
                        <image src="../../static/images/alarm-warning-line.png" mode="scaleToFill" />
                    </view>
                </view>
                <view class="icons-close">
                    <image src="../../static/images/icons-close.png" mode="scaleToFill" />
                </view>
            </view>
            <view class="title">
                {{ title }}
            </view>
            <view class="content">{{ content }}
            </view>
            <view class="flex justify-around btn-group">
                <button class="btn-cancel" @click="show = false">取消</button>
                <button class="btn-open" @click="router(`${btnRouter}`)">{{ btnName }}</button>
            </view>
        </view>
    </uv-overlay>
</template>
<style scoped lang="scss"> .validate {
     padding: 40rpx;
     position: absolute;
     border-radius: 20rpx;
     width: 626rpx;
     height: 500rpx;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     background-color: #ffffff;

     .icons-close {
         width: 50rpx;
         height: 50rpx;
     }

     .btn-group {
         margin-top: 40rpx;

         .btn-cancel {
             border-radius: 8px;
             border: 1px solid rgba(154, 154, 154);
             font-size: 14px;
             width: 250rpx;
             color: #4F4F4F;
             height: 80rpx;
         }

         .btn-open {
             border-radius: 8px;
             background: linear-gradient(0deg, #BF0103, #FF5402);

             color: #ffffff;
             border: 0px solid #BBBBBB;
             font-size: 14px;
             width: 250rpx;
             height: 80rpx;
         }
     }

     .icon {
         margin-bottom: 20rpx;
         width: 114rpx;
         height: 114rpx;
         border-radius: 50%;
         background-color: #FEF3F2;

         .icon2 {
             width: 81rpx;
             height: 81rpx;
             border-radius: 50%;
             background-color: #FEE4E2;

         }

         image {
             width: 48rpx;
             height: 48rpx;

         }
     }

     .title {
         font-size: 32rpx;
         font-weight: 700;
         margin-bottom: 20rpx;

     }

     .content {
         color: #6C6C6C;
         font-size: 28rpx;

     }
 }
</style>